var app = angular.module('main', []);

app.directive('clickable', function() {

return {
  restrict: "E",
  $scope: {
    foo: '=',
    bar: '='
  },
  template: '<ul style="background-color: lightblue"><li>{{foo}}</li><li>{{bar}}</li></ul>',
  link: function($scope, element, attrs) {
    element.bind('click', function() {
		  $scope.$apply(function() {
			  $scope.foo++;
			  $scope.bar++;
		  });
});
  }
}

});

app.controller('DemoController', function($scope) {
  $scope.foo = 0;
  $scope.bar = 0;
});